<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
    <title>信息收集</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 20px;
        }

        h1 {
            text-align: center;
        }

        form {
            max-width: 500px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="email"],
        textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-bottom: 10px;
        }

        textarea {
            height: 80px;
        }

        select {
            width: 100%;
            height: 40px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-bottom: 10px;
        }

        input[type="submit"] {
            background-color: #4caf50;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<body>
<h1>信息收集</h1>

<form onsubmit="sendEmail(event)">
    <label for="merchantId">商户编号:</label>
    <input type="text" id="merchantId" name="merchantId" required />

    <label for="merchantName">商户名字:</label>
    <input type="text" id="merchantName" name="merchantName" required />

    <label for="contactPerson">联系人:</label>
    <input type="text" id="contactPerson" name="contactPerson" />

    <label for="contactPhone">联系人手机:</label>
    <input type="text" id="contactPhone" name="contactPhone" />

    <label for="contactEmail">联系人邮箱:</label>
    <input type="email" id="contactEmail" name="contactEmail" />

    <label for="selectField">修改资料项目:</label>
    <select id="selectField" name="selectField" required>
        <option value="全称">全称</option>
        <option value="简称">简称</option>
        <option value="地址">地址</option>
        <option value="营业执照">营业执照</option>
        <option value="结算账号">结算账号</option>
    </select>

    <label for="originalInfo">原信息:</label>
    <textarea
            id="originalInfo"
            name="originalInfo"
            rows="2"
            required
    ></textarea>

    <label for="newInfo">新信息:</label>
    <textarea id="newInfo" name="newInfo" rows="2" required></textarea>

    <input type="submit" value="提交" />
</form>

<script>
    function sendEmail(event) {
        event.preventDefault();

        var merchantId = document.getElementById("merchantId").value;
        var merchantName = document.getElementById("merchantName").value;
        var contactPerson = document.getElementById("contactPerson").value;
        var contactPhone = document.getElementById("contactPhone").value;
        var contactEmail = document.getElementById("contactEmail").value;
        var selectField = document.getElementById("selectField").value;
        var originalInfo = document.getElementById("originalInfo").value;
        var newInfo = document.getElementById("newInfo").value;

        var subject = "商户信息收集";
        var body =
            "商户编号: " +
            merchantId +
            "<br/>商户名字: " +
            merchantName +
            "<br/>联系人: " +
            contactPerson +
            "<br/>联系人手机: " +
            contactPhone +
            "<br/>联系人邮箱: " +
            contactEmail +
            "<br/>修改资料项目: " +
            selectField +
            "<br/>原信息: " +
            originalInfo +
            "<br/>新信息: " +
            newInfo;

        var xhr = new XMLHttpRequest();
        // 地址：https://luckycola.com.cn/tools/customMail
        xhr.open("POST", "https://dm.aliyuncs.com/", true);
        xhr.setRequestHeader("Content-Type", "application/json");

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    alert("邮件发送成功！");
                } else {
                    console.log("请求失败，状态码：" + xhr.status);
                    console.log("错误原因：" + xhr.statusText);
                }
            }
        };

        // var data = {
        //   ColaKey: "UaKXRKPZOAMPz31694943963787I3ZfhvC42x",
        //   tomail: "zhangli@umpay.com",
        //   from: "15711261792@163.com",
        //   fromTitle: "信息收集",
        //   subject: "信息收集结果",
        //   content: body,
        // };

        // var data = 'Action=SingleSendMail' +
        //         '&AccountName=songjibin' +
        //         '&AddressType=0' +
        //         '&ReplyToAddress=true' +
        //         '&ToAddress=1796254117@qq.com' +
        //         '&Subject=' +subject+
        //         '&HtmlBody=' +body+
        //         '&Format=json' +
        //         '&Version=2015-11-23' +
        //         '&AccessKeyId=LTAI5tGKAPW477NnWbLy2oje' +
        //         '&Signature='+
        //         '&SignatureMethod=HMAC-SHA1' +
        //         '&Timestamp=' + new Date().toISOString() +
        //         '&SignatureVersion=1.0' +
        //         '&SignatureNonce=' + Math.random().toString(36).substr(2, 15);





        var accessKeyId = 'LTAI5tGKAPW477NnWbLy2oje';
        var accessKeySecret = '3esBxMmZWRHLNZ5n0WR9l7Ju6YZDt2';

        var params = {
            Action: 'SingleSendMail',
            AccountName: 'sjb',
            AddressType: '1',
            ReplyToAddress: 'true',
            ToAddress: '1796254117@qq.com',
            Subject: 'Test Email',
            HtmlBody: '<h1>Hello!</h1><p>This is a test email.</p>',
            Format: 'JSON',
            Version: '2017-06-22',
            // RegionID:'cn-hangzhou',
            AccessKeyId: accessKeyId,
            SignatureMethod: 'HMAC-SHA1',
            Timestamp: new Date().toISOString(),
            SignatureVersion: '1.0',
            SignatureNonce: Math.random().toString(36).substr(2, 15)
        };

        var sortedKeys = Object.keys(params).sort();
        var canonicalizedQueryString = '';

        for (var i = 0; i < sortedKeys.length; i++) {
            var key = sortedKeys[i];
            canonicalizedQueryString += '&' + encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
        }

        canonicalizedQueryString = canonicalizedQueryString.substr(1);

        var stringToSign = 'POST&%2F&' + encodeURIComponent(canonicalizedQueryString);
        var signature = CryptoJS.HmacSHA1(stringToSign, accessKeySecret + '&');
        signature = CryptoJS.enc.Base64.stringify(signature);

        var data = canonicalizedQueryString + '&Signature=' + encodeURIComponent(signature);

        xhr.send(data);


        // xhr.send(JSON.stringify(data));
    }
</script>
</body>
</html>
